<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 通过link……herf引入css -->
    <link rel="stylesheet" href="index.css"> 
</head>
<body>
    <div class="topbar">
        <div class="wrapper">
            <div class="topbar-list">
                <a href="#">小米网</a>
                <span class="sep">|</span>
                <a href="#">MIUI</a>
                <span></span>
                <a href="#">米聊</a>
                <span>|</span>
                <a href="#">游戏</a>
                <span>|</span>
                <a href="#">多看阅读</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">小米网移动版</a>
                </div>
                <span></span>
                <div class="topbar-info">
                    <a href="#">登录</a>
                    <span>|</span>
                    <a href="#">注册</a>
                </div>    
                
               
        </div>
    </div>
    <div class="header wrapper"> 
        <a class="logo" href="#">
            <img src="image/logo.png" alt="">
        </a>
        <ul class="nav">
            <li>
                <a class="nav-list" href="#">首页</a>
            </li>
            <li class="nav-money">
                <a class="nav-list" href="#">理财</a>
                  <div class="nav-sub-list">
                      <ul>
                          <li>
                              <a href="#">定期活期</a>
                          </li>
                          <li>
                              <a href="#">基金投资</a>
                          </li>
                      </ul>
                  </div>  
            </li>
            <li>
                <a class="nav-list" href="#">贷款</a>
            </li>
            <li>
                <a class="nav-list" href="#">资产</a>
            </li>
            <li>
                <a class="nav-list" href="#">社区</a>
            </li>
            <li>
                 <a class="nav-list" href="#">客户端</a>
            </li>
        </ul>



    </div>
    <div class="banner">
        <h2>小米用科技畅想金融</h2>
        <div class="download_bth">
            <a href="#">
                下载小米金融APP
            </a>
        </div>
        
    </div>
    <div class="content wrapper ">
        <ul>
            <li class="list">
                <a href="#">
                    <div class="list-img">
                        <h2 class="list-title">财富</h2>
                        <p class="list-desc">新手最高领888</p>
                    </div>
                    <div class="list-info">
                        <div>
                            <span>小米官方</span>|小米的综合财富平台
                        </div>
                        <div>
                            <span>安全可靠</span>|严控资金，多重风控组合
                        </div>
                        <div>
                            <span>优质产品</span>|知名合作伙伴，精选理财产品    
                        </div>  
                        <div class="list-more">
                            了解更多
                        </div>
                    </div>
                </a>
            </li>
            <li class="list list-blue">
                <a href="#">
                    <div class="list-img">
                        <h2 class="list-title">贷款</h2>
                        <p class="list-desc">贷款一分钟到账</p>
                    </div>
                    <div class="list-info">
                        <div>
                            <span>借还灵活</span>|最高20万，随借随还
                        </div>
                        <div>
                            <span>极速放款</span>|最快一分钟到账
                        </div>
                        <div>
                            <span>超低利率</span>|日息万2起，按日计息    
                        </div>  
                        <div class="list-more">
                            了解更多
                        </div>
                    </div>
                </a>
            </li>
            <li class="list list-green">
                <a href="#">
                    <div class="list-img">
                        <h2 class="list-title">保险</h2>
                        <p class="list-desc">超低价格，2.3折起</p>
                    </div>
                    <div class="list-info">
                        <div>
                            <span>健康险</span>|精选产品，全面保障
                        </div>
                        <div>
                            <span>财产险</span>|贴心保障，售后无忧
                        </div>
                        <div>
                            <span>汽车险</span>|二次费改，低至2.3折    
                        </div>  
                        <div class="list-more">
                            了解更多
                        </div>
                    </div>
                </a>
            </li>
        </ul>

    </div>
    <div class="footer wrapper">
    <div class="footer-left">
        <img class="footer-left-logo" src="image/logo1.png">
        <div class="footer-left-message">
        <ul class="about">
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">关注我们</a></li>
            <li><a href="#">新浪微博</a></li>
        </ul>
        <ul class="contact">
            <span>Copyright © mi.com 京ICP备10046444号-7</span>
            <span>京公网安备 11010802020134号</span>
            <span>京ICP证110507号</span>
        </ul>
        </div>
    </div>
    <div class="footer-right">
        <p class="right-title">客服电话</p>
        <p class="right-tel">400-100-3399</p>
        <p class="right-time">周一至周五9：00-10:00（仅收市话费）</p>
    </div>

</body>
</html>
